<template>
    <div>
        <Suspense>
            <template #default>
                <girl-show />
            </template>
            <template #fallback>
                <h1>Loading...</h1>
            </template>
        </Suspense>
        <Suspense>
            <template #default>
                <AsyncShow />
            </template>
            <template #fallback>
                <h1>Loading...</h1>
            </template>
        </Suspense>
        <div>{{ nowTime }}</div>
        <div><button @click="getNowTime">显示时间</button></div>

        <!-- <router-link></router-link> -->
        <img alt="Vue logo" src="./assets/logo.png" />
        <div>
            <h2>欢迎光临象牙山</h2>
            <div>请选择一位村民为你服务</div>
        </div>
        <div>
            <button v-for="(item, index) in girls" :key="index" @click="selectGirlFun(index)">
                {{ index }} : {{ item }}
            </button>
        </div>
        <div>你选择了【{{ selectGirl }}】为你服务</div>
        <el-button type='primary' @click="OverAction">点击</el-button>
        <div>{{overText}}</div>

        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
        <life></life>
        <div v-if="loading">Loading.....</div>
        <img v-if="loaded" :src="result.message" />
        <div style="margin-top:20px">---------------------------------------</div>
        <!-- <modal></modal> -->
        <div style="margin-top:20px">---------------------------------------</div>
        <!-- <Suspense>
            <template #default>
                <girl-show />
            </template>
            <template #fallback>
                <h1>Loading...</h1>
            </template>
        </Suspense> -->


    </div>
</template>
<script lang="ts">
    import { nowTime, getNowTime } from "./hooks/useNowTime"
    import useUrlAxios from "./hooks/useURLAxios";
    import HelloWorld from './components/HelloWorld.vue';
    import life from './components/life.vue';
    // import modal from './components/Modal.vue';
    import AsyncShow from './components/AsyncShow.vue';
    import GirlShow from "./components/GirlShow.vue";

    //reactive
    import {
        defineComponent,
        toRefs,
        ref,
        reactive,
        // onMounted,
        // onBeforeMount,
        // onBeforeUpdate,
        onUpdated,
        // onRenderTracked,
        // onRenderTriggered,
        onErrorCaptured,
        watch, //监听器

    } from 'vue';
    interface DateProps {
        girls: string[];
        selectGirl: string;
        selectGirlFun: (index: number) => void;
    }
    export default defineComponent({
        name: 'App',
        components: {
            HelloWorld,
            life,
            // modal,
            AsyncShow,
            GirlShow
        },

        // 在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

        // 不用data  methods
        setup() {
            const { result, loading, loaded } = useUrlAxios(
                "https://dog.ceo/api/breeds/image/random"
            );
            const date: DateProps = reactive({
                girls: ["大脚", "刘英", "晓红", '小美'],
                selectGirl: '',
                selectGirlFun: (index: number) => {
                    date.selectGirl = date.girls[index];
                },
            })
            onErrorCaptured((error) => {
                console.log(`error====>`, error)
                return true
            })
            // onRenderTracked((event) => {
            //     console.log('状态跟踪', event);
            // })
            // onRenderTriggered((event) => {
            //     console.log("状态触发组件--------------->");
            //     console.log(event);
            // });
            // 生命周期

            // Vue2--------------vue3
            // beforeCreate  -> setup()
            // created       -> setup()
            // beforeMount   -> onBeforeMount
            // mounted       -> onMounted
            // beforeUpdate  -> onBeforeUpdate
            // updated       -> onUpdated
            // beforeDestroy -> onBeforeUnmount
            // destroyed     -> onUnmounted  组件卸载执行
            // activated     -> onActivated   
            // deactivated   -> onDeactivated
            // errorCaptured -> onErrorCaptured 捕获子组件
            //             setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
            // onBeforeMount() : 组件挂载到节点上之前执行的函数。
            // onMounted() : 组件挂载完成后执行的函数。
            // onBeforeUpdate(): 组件更新之前执行的函数。
            // onUpdated(): 组件更新完成之后执行的函数。
            // onBeforeUnmount(): 组件卸载之前执行的函数。
            // onUnmounted(): 组件卸载完成后执行的函数
            // onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
            // onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
            // onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）
            // onBeforeMount(() => {
            //     console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
            // });

            // onMounted(() => {
            //     console.log("3-组件挂载到页面之后执行-----onMounted()");
            // });
            // onBeforeUpdate(() => {
            //     console.log("4-组件更新之前-----onBeforeUpdate()");
            // });

            onUpdated(() => {
                console.log("5-组件更新之后-----onUpdated()");
            });
            const refData = toRefs(date);
            const overText = ref('9999999999999999999');
            const OverAction = () => {
                overText.value = '服务已经安排' + overText.value;
            }
            watch(overText, (newValue, oldValue) => {
                console.log(`new--->${newValue}`);
                console.log(`old--->${oldValue}`);
                document.title = newValue;
            });

            // const girls = ref(["大脚", "刘英", "晓红",'小美']);
            // const selectGirl = ref("");
            // const selectGirlFun = (index: number) => {
            //     selectGirl.value = girls.value[index];
            // }; 
            return { //必须加return
                // girls,
                // selectGirl,
                // selectGirlFun,

                ...refData,
                result,
                loading,
                loaded,
                overText,
                OverAction,
                nowTime,
                getNowTime
            };
        },
        beforeCreate() {
            console.log('0000000beforeCreate');
        },
    });
</script>
<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>